<template>
    <el-dialog 
        :visible="visible"
        :title="titleTxt" 
        :show-close="false" 
        class="person-detail-dialog" 
        width="40%"
    >
        <div class="detail-content">
            <div class="inline-box">
                <label class="detail-label">{{ `${auth}名称：` }}</label>
                <span class="detail-value">{{person.name}}</span>
            </div>
            <div class="inline-box">
                <label class="detail-label">{{ `${auth}描述：` }}</label>
                <span class="detail-value">{{person.description || "暂无信息"}}</span>
            </div>
            <div class="inline-box">
                <label class="detail-label">{{ `${auth}状态：` }}</label>
                <span class="detail-value" :class="statusColor(person.isLock)">{{ person.isLock == '0' ? '未锁定': '已锁定' }}</span>
            </div>
            <div v-if="showService('hdfs')">
                <el-divider content-position="left" class="service-divider">HDFS</el-divider>
                <div class="inline-box">
                    <label class="detail-label">目录：</label>
                    <span class="detail-value">{{services.hdfs.url}}</span>
                </div>
                <div class="inline-box">
                    <label class="detail-label">容量配额：</label>
                    <span class="detail-value">{{services.hdfs.capacity}} {{ getUnit(services.hdfs.unit) }}</span>
                </div>
                <div class="inline-box">
                    <label class="detail-label">文件配额：</label>
                    <span class="detail-value">{{services.hdfs.fileNum}} 个</span>
                </div>
            </div>
            <div v-if="showService('hive')">
                <el-divider content-position="left" class="service-divider">Hive</el-divider>
                <div class="inline-box">
                    <label class="detail-label">数据库名：</label>
                    <span class="detail-value">{{services.hive.databaseName}}</span>
                </div>
            </div>
            <div v-if="showService('hbase')">
                <el-divider content-position="left" class="service-divider">HBase</el-divider>
                <div class="inline-box">
                    <label class="detail-label">命名空间：</label>
                    <span class="detail-value">{{services.hbase.spaceName}}</span>
                </div>
            </div>
            <div v-if="showService('yarn')">
                <el-divider content-position="left" class="service-divider">Yarn</el-divider>
                <div class="inline-box">
                    <label class="detail-label">队列名：</label>
                    <span class="detail-value">{{services.yarn.queueName}}</span>
                </div>
                <div class="inline-box">
                    <label class="detail-label">资源占比：</label>
                    <span class="detail-value">{{services.yarn.ratio}} %</span>
                </div>
            </div>
            <div v-if="!!services.kafka.kafkaTopicNum">
                <el-divider content-position="left" class="service-divider">Kafka</el-divider>
                <div class="inline-box">
                    <label class="detail-label">主题数量：</label>
                    <span class="detail-value">{{services.kafka.kafkaTopicNum}}</span>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onCloseDetail">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { SERVICE_OPTIONS, CAPACITY_UNIT_MAP } from '@/const';
import { formatServiceObj, cleanServiceForm } from '@/utils';
import { managerApi } from '@/request';
import { mapState } from 'vuex';
import _ from 'lodash';

export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        titleTxt: {
            type: String,
            default: '',
        },
        person: {
            type: Object,
            default: {
                id: '',
                name: '',
                description: '',
                isLock: '',
                type: '' // 租户or用户
            }
        }
    },
    data() {
        return {
            // serviceOptions: SERVICE_OPTIONS, // 资源组件选项
            services: cleanServiceForm(false, true)
        }
    },
    computed: {
        ...mapState(['installedServices']),
        auth() {
            return this.person.type === 'TENANT' ? '租户' : '用户';
        }
    },
    mounted() {
        if (this.person.type === 'TENANT') {
            this.getResource();
        }
    },
    methods: {
        statusColor(isLock) {
            return isLock == '0' ? 'green' : 'red';
        },
        getUnit(value) {
            return CAPACITY_UNIT_MAP[value];
        },
        showService(name) { // 只显示 （1）系统已安装（2）已分给租户 的组件
            const tenantOwned = !!_.get(this.services[name], 'id');
            const installedServicesString = this.installedServices.toString();
            const installed = new RegExp(name, 'i').test(installedServicesString);
            return tenantOwned && installed;
        },
        getResource() {
            managerApi.getResource({
                tenantId: parseInt(this.person.id)
            }).then((res) => {
                const serviceObj = res.data[0];
                this.services = _.toPairs(serviceObj).filter( item => !!item[1] ).map( item => item[0] ).map( item => {
                    return formatServiceObj(this.services, item, serviceObj[item], this.person.name);
                }).flatten();
            }).catch(err => {})
        },
        onCloseDetail() {
            this.$emit('update:visible', false);
            this.$nextTick(() => {
                cleanServiceForm(false, true);
                this.$emit('cleanData');
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.person-detail-dialog .detail-content {
    padding: 20px 30px;
}
.person-detail-dialog .detail-content .inline-box {
    margin-bottom: 15px;
    .detail-label {
        display: inline-block;
        width: 110px;
        text-align: right;
    }
    .green {
        color: $green;
    }
    .red {
        color: $red;
    }
}
.person-detail-dialog .detail-content .service-divider {
    margin: 48px 0 24px;
    .el-divider__text {
        font-weight: bold;
    }
}
</style>